<template>
  <view>
    <view class="goods-ul">
      <view class="goods-li" v-for="(item, index) in goods_list" :key="index">
        <view class="del-icon" @click="delGoods(index)"
          ><u-icon name="minus-circle-fill" color="#fb5904" size="40"></u-icon
        ></view>
        <view class="goods-name ellipsis">{{ item.goodsName }}</view>
        <view class="goods-sku clearfix">
          <view class="float_left" style="width: 430rpx"
            >规格:{{ item.unitName }}{{ item.specGropName }}</view
          >
          <view class="float_right">{{ item.goodsCode }}</view>
        </view>
        <view class="goods-sku clearfix" v-if="item.skuValue">
          <view class="float_left">换算比例：{{ item.skuValue }}</view>
          <view class="float_right">转换数量：{{ item.skuNum }}</view>
        </view>
        <view class="num-ul">
          <view class="num-li">
            <view class="label">采购单价</view>
            <view class="value"
              ><input
                type="digit"
                @blur="subtotalPriceChange(index)"
                v-model="item.buyerUnitPrice"
            /></view>
          </view>
          <view class="num-li">
            <view class="label">采购数量</view>
            <view class="value"
              ><input
                type="digit"
                @blur="subtotalPriceChange(index)"
                placeholder="请输入"
                v-model="item.buyerNum"
            /></view>
          </view>
          <view class="num-li" v-if="item.isEq === 5">
            <view class="label">其他单位</view>
            <view class="value"
              ><input
                type="digit"
                @blur="subtotalPriceChange(index)"
                placeholder="请输入"
                v-model="item.otherNum"
            /></view>
          </view>
        </view>
      </view>
    </view>
    <view class="detail-bottom clearfix">
      <view class="left-view">
        <view class="total-price">¥{{ purchaseAmount }}</view>
        <view class="left-desc"
          >已选{{ goods_list.length }}种，{{ totalNum }}个</view
        >
      </view>
      <view class="right-view" @click="goodsConfirm">
        <view class="btn-li">确定</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: 0,
      goods_list: [],
    };
  },
  computed: {
    totalNum() {
      let sum = 0;
      if (this.goods_list.length > 1) {
        this.goods_list.forEach((item) => {
          sum = this.$NP.plus(sum, Number(item.buyerNum));
        });
      } else if (this.goods_list.length === 1) {
        sum = Number(this.goods_list[0].buyerNum);
      } else {
        sum = 0;
      }
      return sum || 0;
    },
    purchaseAmount() {
      let sum = 0;
      if (this.goods_list.length > 1) {
        this.goods_list.forEach((item) => {
          sum = this.$NP.plus(sum, Number(item.subtotalPrice));
        });
      } else if (this.goods_list.length === 1) {
        sum = Number(this.goods_list[0].subtotalPrice);
      } else {
        sum = 0;
      }
      return sum || 0;
    },
  },
  onLoad() {
    console.log("PurchaseGoods获取到的数据");

    this.goods_list = uni.getStorageSync("PurchaseGoods");
    console.log("goods_list::", this.goods_list);
  },
  methods: {
    subtotalPriceChange(index) {
      const target = this.$u.deepClone(this.goods_list);
      target[index].subtotalPrice = this.$NP.times(
        target[index].buyerUnitPrice,
        target[index].buyerNum
      );
      this.goods_list = target;
    },
    goodsConfirm() {
      this._prePage().purchaseGoods = this.goods_list;
      uni.navigateBack();
    },
    delGoods(index) {
      this.goods_list.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-ul {
  padding-bottom: 100rpx;

  .goods-li {
    background-color: #ffffff;
    border-bottom: 1px solid #eeeeee;
    padding: 20rpx;
    padding-left: 80rpx;
    font-size: 24rpx;
    color: #6c6c6c;
    line-height: 50rpx;
    position: relative;

    .del-icon {
      position: absolute;
      top: 50%;
      left: 20rpx;
      transform: translateY(-50%);
    }

    .goods-name {
      -webkit-line-clamp: 2;
      font-size: 28rpx;
      color: #111111;
    }

    .price {
      font-size: 28rpx;
      color: $uni-color-error;
    }

    .goods-num {
      input {
        width: 170rpx;
        display: inline-block;
        border: 1px solid #eeeeee;
        line-height: 60rpx;
        border-radius: 10rpx;
        padding: 0 10rpx;
        vertical-align: middle;
        font-size: 24rpx;
      }
    }
  }
}

.num-ul {
  display: flex;
  font-size: 24rpx;
  padding-top: 10rpx;

  .num-li {
    flex: 4;
    border-right: 1px solid #ecf0f7;
    text-align: center;
    padding: 0 10rpx;

    &:last-child {
      border-right: 0 none;
    }

    .label {
      color: #879bba;
    }

    .value {
      height: 40rpx;
      line-height: 40rpx;
      border-bottom: 1px solid $uni-color-primary;

      input {
        font-size: 24rpx;
        height: 40rpx;
        line-height: 40rpx;
      }
    }
  }
}

.detail-bottom {
  display: block;
  background-color: #ffffff;

  .left-view {
    float: left;
    padding: 10rpx 30rpx;

    .total-price {
      color: $uni-color-error;
      font-weight: bold;
    }

    .left-desc {
      font-size: 24rpx;
      color: #6c6c6c;
    }
  }

  .right-view {
    float: right;
    padding: 10rpx 30rpx;
    margin-left: 30rpx;

    .btn-li {
      width: 200rpx;
      text-align: center;
      line-height: 80rpx;
      height: 80rpx;
      background: $uni-color-primary;
      border: 1px solid $uni-color-primary;
      color: #ffffff;
      border-radius: 10rpx;
    }
  }
}
</style>
